import { useState } from 'react';
import { Card } from './ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
import { Badge } from './ui/badge';
import { Progress } from './ui/progress';
import { Avatar, AvatarFallback } from './ui/avatar';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
import { Button } from './ui/button';
import { Phone, MapPin, CheckCircle2, XCircle, Eye } from 'lucide-react';
import { mockCleaners, mockCleaningData } from '../data/mockData';
import type { Cleaner } from '../types';

export function CleanerManagement() {
  const [selectedCleaner, setSelectedCleaner] = useState<Cleaner | null>(null);

  const getStatusColor = (status: string) => {
    const colors = {
      '在岗': 'bg-green-100 text-green-800',
      '休息': 'bg-yellow-100 text-yellow-800',
      '离岗': 'bg-gray-100 text-gray-800'
    };
    return colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800';
  };

  const getCleanerData = (cleanerId: string) => {
    return mockCleaningData.filter(d => d.cleanerId === cleanerId);
  };

  return (
    <div className="space-y-6">
      <div>
        <h2>保洁员管理</h2>
        <p className="text-gray-500">查看保洁员工作情况和清洁质量</p>
      </div>

      {/* 保洁员卡片网格 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {mockCleaners.map((cleaner) => {
          const completionRate = Math.round((cleaner.completedTasks / cleaner.todayTasks) * 100);
          return (
            <Card key={cleaner.id} className="p-6">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <Avatar>
                    <AvatarFallback>{cleaner.name[0]}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p>{cleaner.name}</p>
                    <p className="text-sm text-gray-500">{cleaner.id}</p>
                  </div>
                </div>
                <Badge className={getStatusColor(cleaner.status)}>
                  {cleaner.status}
                </Badge>
              </div>

              <div className="space-y-3">
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="text-gray-500">完成进度</span>
                    <span>{cleaner.completedTasks}/{cleaner.todayTasks}</span>
                  </div>
                  <Progress value={completionRate} className="h-2" />
                </div>

                <div className="flex justify-between text-sm">
                  <span className="text-gray-500">平均评分</span>
                  <span className={cleaner.averageScore >= 85 ? 'text-green-600' : cleaner.averageScore >= 75 ? 'text-blue-600' : 'text-yellow-600'}>
                    {cleaner.averageScore}分
                  </span>
                </div>

                <Dialog>
                  <DialogTrigger asChild>
                    <Button 
                      variant="outline" 
                      className="w-full gap-2"
                      onClick={() => setSelectedCleaner(cleaner)}
                    >
                      <Eye className="w-4 h-4" />
                      查看详情
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
                    <DialogHeader>
                      <DialogTitle>{cleaner.name} - 工作详情</DialogTitle>
                    </DialogHeader>
                    {selectedCleaner && (
                      <div className="space-y-6">
                        {/* 基本信息 */}
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <p className="text-sm text-gray-500 mb-1">联系电话</p>
                            <div className="flex items-center gap-2">
                              <Phone className="w-4 h-4 text-gray-400" />
                              <span>{cleaner.phone}</span>
                            </div>
                          </div>
                          <div>
                            <p className="text-sm text-gray-500 mb-1">负责区域</p>
                            <div className="flex items-center gap-2">
                              <MapPin className="w-4 h-4 text-gray-400" />
                              <span>{cleaner.assignedAreas.join('、')}</span>
                            </div>
                          </div>
                        </div>

                        {/* 今日清洁记录 */}
                        <div>
                          <h4 className="mb-3">今日清洁记录</h4>
                          <div className="space-y-2">
                            {getCleanerData(cleaner.id).map((record) => (
                              <div 
                                key={record.id}
                                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
                              >
                                <div className="flex-1">
                                  <div className="flex items-center gap-2 mb-1">
                                    <p>{record.location}</p>
                                    <Badge variant="outline" className="text-xs">
                                      {record.type}
                                    </Badge>
                                  </div>
                                  <p className="text-sm text-gray-500">{record.timestamp}</p>
                                </div>
                                <div className="flex items-center gap-3">
                                  <div className="text-right">
                                    <p className={record.score >= 90 ? 'text-green-600' : record.score >= 80 ? 'text-blue-600' : record.score >= 70 ? 'text-yellow-600' : 'text-red-600'}>
                                      {record.score}分
                                    </p>
                                    <p className="text-xs text-gray-500">{record.status}</p>
                                  </div>
                                  {record.issues && record.issues.length > 0 ? (
                                    <XCircle className="w-5 h-5 text-red-500" />
                                  ) : (
                                    <CheckCircle2 className="w-5 h-5 text-green-500" />
                                  )}
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>

                        {/* 问题记录 */}
                        <div>
                          <h4 className="mb-3">问题记录</h4>
                          {getCleanerData(cleaner.id).filter(r => r.issues && r.issues.length > 0).length > 0 ? (
                            <div className="space-y-2">
                              {getCleanerData(cleaner.id)
                                .filter(r => r.issues && r.issues.length > 0)
                                .map((record) => (
                                  <div key={record.id} className="p-3 bg-red-50 border border-red-200 rounded-lg">
                                    <div className="flex justify-between items-start mb-2">
                                      <p>{record.location}</p>
                                      <span className="text-sm text-gray-500">{record.timestamp}</span>
                                    </div>
                                    <ul className="list-disc list-inside text-sm text-red-700">
                                      {record.issues?.map((issue, idx) => (
                                        <li key={idx}>{issue}</li>
                                      ))}
                                    </ul>
                                  </div>
                                ))}
                            </div>
                          ) : (
                            <p className="text-center text-gray-400 py-4">暂无问题记录</p>
                          )}
                        </div>
                      </div>
                    )}
                  </DialogContent>
                </Dialog>
              </div>
            </Card>
          );
        })}
      </div>

      {/* 详细表格 */}
      <Card>
        <div className="p-6">
          <h3 className="mb-4">保洁员工作统计</h3>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>工号</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>负责区域</TableHead>
                  <TableHead>今日任务</TableHead>
                  <TableHead>完成任务</TableHead>
                  <TableHead>完成率</TableHead>
                  <TableHead>平均评分</TableHead>
                  <TableHead>联系电话</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mockCleaners.map((cleaner) => {
                  const completionRate = Math.round((cleaner.completedTasks / cleaner.todayTasks) * 100);
                  return (
                    <TableRow key={cleaner.id}>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Avatar className="w-8 h-8">
                            <AvatarFallback>{cleaner.name[0]}</AvatarFallback>
                          </Avatar>
                          {cleaner.name}
                        </div>
                      </TableCell>
                      <TableCell className="text-gray-500">{cleaner.id}</TableCell>
                      <TableCell>
                        <Badge className={getStatusColor(cleaner.status)}>
                          {cleaner.status}
                        </Badge>
                      </TableCell>
                      <TableCell>{cleaner.assignedAreas.join('、')}</TableCell>
                      <TableCell>{cleaner.todayTasks}</TableCell>
                      <TableCell>{cleaner.completedTasks}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Progress value={completionRate} className="w-16 h-2" />
                          <span className="text-sm">{completionRate}%</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <span className={cleaner.averageScore >= 85 ? 'text-green-600' : cleaner.averageScore >= 75 ? 'text-blue-600' : 'text-yellow-600'}>
                          {cleaner.averageScore}
                        </span>
                      </TableCell>
                      <TableCell className="text-gray-500">{cleaner.phone}</TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </div>
        </div>
      </Card>
    </div>
  );
}
